<template>
    <van-sticky>
        <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onBack">
        </van-nav-bar>
    </van-sticky>

    <van-contact-card type="edit" :name="`${order.address.consignee} ${order.address.region_text}`"
        :tel="order.address.mobile" :editable="false" />

    <van-card v-for="item in order.order_product" :key="item" :num="item.pronum" :price="item.total"
        :title="item.products.name" :thumb="item.products.thumb_cdn">
        <template #desc>
            <div>
                商品单价：{{ item.products.price }}
            </div>
        </template>
        <template #tags>
            <van-tag plain type="danger" v-if="!item.attrs">无商品规格</van-tag>
            <div v-else>
                <van-tag plain type="primary" v-for="attr in JSON.parse(item.attrs)" :key="attr">{{ attr.value
                    }}</van-tag>
            </div>
        </template>
        <template #footer>
            <van-button size="mini" type="danger">申请售后</van-button>
        </template>
    </van-card>

    <van-cell-group>
        <van-cell title="订单号" :value="order.code" />
        <van-cell title="订单总价" :value="`￥${order.amount}`" />
        <van-cell title="支付方式" :value="order.pay_text" />
        <van-cell title="订单状态" :value="order.status_text" />
        <van-cell title="优惠金额" :value="'暂未处理'" />
        <van-cell title="下单时间" :value="order.createtime_text" />
        <van-cell title="订单备注" :value="order.remark" v-if="order.remark" />
    </van-cell-group>

    <!-- 操作按钮组 -->
    <div class="actions" style="display: flex;justify-content: space-around;">
        <van-button square hairline type="primary" size="large" style="width: 200px;">在线客服</van-button>
        <van-button square hairline type="danger" size="large" v-if="order.status == '1'" style="width: 200px;">申请退款</van-button>
        <!-- <van-button square hairline type="success" size="large">物流详情</van-button>
        <van-button square hairline type="danger" size="large">确认收货</van-button>
        <van-button square hairline type="warning" size="large">立即评价</van-button>
        <van-button square hairline type="primary" size="large">申请退货</van-button>
        <van-button square hairline type="success" size="large">填写退货信息</van-button>
        <van-button square hairline type="danger" size="large">退货详情</van-button> -->
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = ref(proxy.$cookies.get('business') ?? {});
const orderid = ref(proxy.$route.query.orderid ?? 0);
const order = ref({
    address: {}
})
onBeforeMount(() => {
    getOrderInfo();
})
const getOrderInfo = async () => {
    let params = {
        busid: business.value.id,
        orderid: orderid.value
    }

    let result = await proxy.$post({
        url: '/product/order/info',
        params
    })

    if (result.code === 1) {
        order.value = result.data;
    } else {
        proxy.$NotifyWarn({
            msg: result.msg,
            onClose: () => onBack()
        })
    }
}
const onBack = () => proxy.$router.back();
</script>